<template>
  <div style="width: 600px;height: 600px;" id="myDiv">
  </div>
</template>

<script>
import * as echarts from '../../assets/echarts.min.js'
import axios from 'axios'
import { onMounted } from 'vue'

export default {
  name: 'one2',
  setup() {

    // 生命周期函数，项目启动时会自动运行
    onMounted(() => {
      datainit()  // 调用初始化的方法
    });

    // 初始化的方法
    const datainit = () => {
      var url = '/api/data/list2'
      // 请求后端接口
      axios.get(url).then(res => {

        let dataAll = [{name:'北美洲',value:40990},{name:'南极洲',value:40760},
        {name:'南美洲',value:40592},{name:'亚洲',value:40417},{name:'非洲',value:39787}]

        console.log(dataAll);

        // 图表的初始化，放在数据获取成功后
        init(dataAll);

      })


    };

    // 初始化图表
    const init = (dataAll) => {
      var options = {
        title:{
          text:'饼状图展示2023年各地区消费总额占比'
        },
        series:{
          type:'pie',
          data:dataAll,
          label:{
            formatter:'{b} {d}%'
          }
        }
      }
      let myChart = echarts.init(document.getElementById("myDiv"));
      myChart.setOption(options)

    }




  }




}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}

ul {
  list-style-type: none;
  padding: 0;
}

li {
  display: inline-block;
  margin: 0 10px;
}

a {
  color: #42b983;
}
</style>
